<template>
	<view class="content">
		<view class="input-group">
			<view class="username">
				<image class="img" src="/static/iocn/tel.png" style="height:54upx" mode="aspectFill"></image>
				<input v-model="phone" maxlength="11" type="number" placeholder="输入手机号" placeholder-class="placeholderClass" @click="hideTabbar" @focus="hideTabbar"
				 @blur="showTabbar" />
			</view>
			<view class="password">
				<image class="img" src="/static/iocn/pwd.png" mode="aspectFill"></image>
				<input placeholder="输入密码" placeholder-class="placeholderClass" v-model="passwd" password=true @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar" />
			</view>
			<view class="verify">
				<image class="img" src="/static/iocn/verify.png" mode="aspectFill"></image>
				<input placeholder="获取验证码" placeholder-class="placeholderClass" v-model="verify" maxlength="4" type="number" style="width:245upx" @click="hideTabbar"
				 @focus="hideTabbar" @blur="showTabbar" />
				<button class="verify-button" @tap="getCodeAction">{{codeBtn.text}}</button>
			</view>
		</view>
		<view class="checkbox-group">
			<view  style="flex-direction: row; display: flex; align-items: center;">
				<checkbox class="checkbox" color="#AD85FC" :checked="ischeck" @tap="changeCheckbox"/>
				<text class="checkbox-text" style="font-size: 21rpx;" @tap="changeCheckbox">我已阅读并同意</text>
				<navigator class="text" url="/pages/xieyi/xieyi">《耳鼻咽喉资讯APP注册协议》</navigator>
			</view>
			
			
		</view>
		<view class="botton-group">
			<button class="submit-button" :disabled="btnActive" :loading="isShowLoading" @click="registerAction">注册</button>
		</view>
		<view style="text-align: center; margin-top: 20rpx;" @tap="callPhone" >联系客服：17769537971（微信同号）</view>
		<view class="to-login" @tap="toLogin">登录</view>
	</view>
</template>

<script>
	import {
		BASE_URL,
		register,
		sendCode,
		getHcp
	} from '@/utils/api'
	// #ifdef APP-PLUS
	const rongIm = uni.requireNativePlugin('GZF-RongIM');
	// #endif
	export default {
		data() {
			return {
				phone: '',
				passwd: '',
				verify: '',
				seconds: 60,
				codeBtn: {
					text: '获取验证码',
					waitingCode: false,
					count: this.seconds
				},
				btnActive: false,
				isShowLoading: false,
				statusBarHeight: 0,
				tabbar: true,
				windowHeight: '',
				ischeck:false
			};
		},
		methods: {
			callPhone(){
				uni.makePhoneCall({
				    phoneNumber: '17769537971',
					success: (res) => {
						console.log('调用成功!')	
					},
					fail: (res) => {
						console.log('调用失败!')
					}
				  });
			},
			showTabbar() {
				this.changeTabBar(true);
			},
			hideTabbar() {
				this.tabbar = false;
				this.$forceUpdate();
			},
			changeTabBar(value) {
				this.tabbar = value;
			},
			async getCodeAction() {
				if((!this.phone) || (this.phone.length != 11)){
					uni.showToast({
					  icon: 'none',
					  title: '手机号输入错误',
					  duration: 1000,
					  position:'bottom'
					});
					return;
				};
				let res = await sendCode(this.phone);
				if (res.status == 0) {
					uni.showToast({
						icon: 'none',
						title: '获取验证码成功',
						duration: 1000,
						position:'bottom'
					});
					this.countDown();
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 1000,
						position:'bottom'
					});
				}
			},
			countDown: function() {
				this.codeBtn.waitingCode = true;
				this.codeBtn.count = this.seconds;
				this.codeBtn.text = this.codeBtn.count + 's';

				let countdown = setInterval(() => {
					this.codeBtn.count--;
					this.codeBtn.text = this.codeBtn.count + 's';
					if (this.codeBtn.count < 0) {
						clearInterval(countdown);
						this.codeBtn.text = '重新发送';
						this.codeBtn.waitingCode = false;
					}
				}, 1000);
			},
			async registerAction() {
				if (this.btnActive) {
					return;
				}
				if((!this.phone) || (this.phone.length != 11)){
					uni.showToast({
					  icon: 'none',
					  title: '手机号输入错误',
					  duration: 1000,
					  position:'bottom'
					});
					return;
				};
				if(!this.passwd){
					uni.showToast({
						icon: 'none',
						title: '请输入密码',
						duration: 1000,
						position:'bottom'
					});
					return;
				}
				if ((!this.verify) || (this.verify.length != 4)) {
					uni.showToast({
						icon: 'none',
						title: '验证码输入错误',
						duration: 1000,
						position:'bottom'
					});
					return;
				}
				if(!this.ischeck){
					uni.showToast({
						icon: 'none',
						title: '请阅读协议并同意',
						duration: 1000,
						position:'bottom'
					});
					return;
				}

				this.btnActive = true;
				this.isShowLoading = true;
				let platform = uni.getSystemInfoSync().platform;
				let params = {}
				params['phone'] = this.phone;
				params['password'] = this.passwd;
				params['code'] = this.verify;
				params['device'] = platform;
				console.log(params);
				let res = await register(params);
				
				if (res.status == 0) {
					uni.removeStorageSync("conversationList");
					uni.setStorageSync('auth_token', res.data.token);
					uni.setStorageSync('user_id', res.data.id);
					this.getHcp(res.data.token);

				} else {
					uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 1000,
						position:'bottom'
					});
					this.btnActive = false;
					this.isShowLoading = false;
				}
			},
			toLogin() {
				// #ifdef APP-PLUS
					plus.key.hideSoftKeybord();
				// #endif
				uni.navigateBack({
					delta: 1
				});
			},
			changeCheckbox(){
				this.ischeck=!this.ischeck;
				this.$forceUpdate();
			},
			async getHcp(token){
				let res = await getHcp();
				if(res.status == 0){
					res.data.token = token;
					uni.setStorageSync("userInfo", res.data);
					uni.showToast({
						icon: 'none',
						title: '注册成功',
						duration: 1000,
						position:'bottom'
					});
					
					setTimeout(() => {
						// #ifdef APP-PLUS
						if(rongIm){
							rongIm.userInfo(JSON.stringify(res.data),
								result => {
									uni.switchTab({
										url: '/pages/tabbar/home/home'
									});
								});
						}else{
							uni.switchTab({
								url: '/pages/tabbar/home/home'
							});
						}
						// #endif
						
						
						
						// #ifdef H5
						uni.switchTab({
							url: '/pages/tabbar/home/home'
						});
						
						// #endif
					}, 1000);
					
					
				}
			}
			
		},
		onLoad(opt) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight;
				}
			});

			setTimeout(() => {
				uni.onWindowResize((res) => {
					console.log(res.size.windowHeight);
					console.log(this.windowHeight);
					if (res.size.windowHeight < this.windowHeight) {
						this.hideTabbar();
					} else {
						this.changeTabBar(true);
					}
				})
			}, 2000)
		}
	};
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		background: #ffffff;
		border-top: 2upx solid #E3E3E3;
	}

	/* 注册 */
	.input-group {
		display: flex;
		flex-direction: column;
		padding-top: 319upx;
		padding-left: 110upx;
		padding-right: 110upx;

		.username,
		.password,
		.verify {
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			width: 100%;
			height: 54upx;
			margin: 20upx 0upx;

			.img {
				width: 40upx;
				height: 40upx;
			}

			input {
				margin-left: 25upx;
				border-bottom: 2upx solid #333333;
				width: 455upx;
				height: 54upx;
			}
		}
	}

	.verify-button {
		font-size: 29upx;
		margin-left: 20upx;
		border-radius: 0upx;
		line-height: 44upx;
		text-align: center;
		background-color: rgba(244, 244, 244, 1);
		color: rgba(173, 133, 252, 1);

		&:after {
			border: none
		}
	}
	
	.checkbox-group {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 110upx;
		padding-right: 110upx;
		padding-top: 40upx;
		height: 36upx;

		.checkbox {
			transform: scale(1);
		}
		
		.checkbox-text{
			font-size: 21upx;
			height: 100rpx;
			line-height: 100rpx;
		}

		.text {
			font-size: 21upx;
			color: rgba(51, 51, 51, 1);
			line-height: 36upx;
		}
	}

	.botton-group {
		display: flex;
		flex-direction: column;
		padding-left: 110upx;
		padding-right: 110upx;
		padding-top: 39upx;

		.submit-button {
			width: 100%;
			height: 88upx;
			margin-bottom: 40upx;
			background: rgba(173, 133, 252, 1);
			border-radius: 4upx;
			font-size: 34upx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(255,255,255,1);

			&:after {
				border: none
			}
		}
	}

	.to-login {
		position: absolute;
		text-align: center;
		bottom: 100upx;
		width: 26%;
		line-height: 100upx;
		margin: 0 37%;
		font-size:34upx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.placeholderClass{
		font-weight:400;
		color:rgba(153,153,153,1);
		font-size: 30upx;
	}
</style>